<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>幸福宝</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.9/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
     <link rel="stylesheet" href="styles/Comm.css"> 
</head>

<body>
  <!-- 你的html代码 -->
    <div class="page">
        <header class="bar bar-nav">
            <h1 class="title">企业活动</h1>
        </header>
        <nav class="bar bar-tab">
            <a class="tab-item" href="Home.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">幸福宝</span>
            </a>
            <a class="tab-item" href="Mall.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">商城</span>
                <span class="badge">2</span>
            </a>
            <a class="tab-item" href="BusinessCulture.html">
                <span class="icon icon-star"></span>
                <span class="tab-label">企业文化</span>
            </a>
            <a class="tab-item active" href="#">
                <span class="icon icon-friends"></span>
                <span class="tab-label">企业活动</span>
            </a>
            <a class="tab-item" href="Me.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我</span>
            </a>
        </nav>
        <div class="content">
            <!-- 这里是页面内容区 -->
            <!-- Slider -->
           <!--  <div class="swiper-container" data-space-between='10'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                </div>
                <div class="swiper-pagination"></div>
            </div> -->
            <!-- Slider -->
            <div class="card self-BusinessActivity">
                <div class="card-content">
                    <div class="card-header color-white no-border no-padding">
                        <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                    </div>
                    <div class="col-80">活动情况</div>
                </div>
            </div>
            <div class="card self-BusinessActivity">
                <div class="card-content">
                    <div class="card-header color-white no-border no-padding">
                        <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                    </div>
                    <div class="col-80">活动情况</div>
                </div>
            </div>
            <div class="card self-BusinessActivity">
                <div class="card-content">
                    <div class="card-header color-white no-border no-padding">
                        <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                    </div>
                    <div class="col-80">活动情况</div>
                </div>
            </div>
            <!-- 这里是页面内容区 -->
        </div>
    </div>
    <!-- 你的html代码 -->
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.9/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    $(function() {
        var mySwiper = new Swiper('.swiper-container', {
            //触控模仿 
            direction: 'horizontal',
            //自动播放
            autoplay: 2000,
            //响应速度
            speed: 400,
            //图片间隔
            spaceBetween: 10,
            //循环模式
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        });
    });
    </script>
</body>

</html>
